import 'package:flutter/material.dart';
import 'package:fl_chart/fl_chart.dart';
import 'package:flutter_wisave/widgets/AppColors.dart';
import 'package:flutter_wisave/widgets/lineChartSample.dart';
import 'package:tdesign_flutter/tdesign_flutter.dart';

class DeviceData extends StatelessWidget {
  final double height;

  DeviceData({super.key, required this.height});

  final List<String> data_1 = ['机电', '仪表', '电气'];
  String selected_4 = '';

  @override
  Widget build(BuildContext context) {
    return Container(
      height: height, // Adjust the height as needed
      child: Column(
        children: [
          Container(
            margin:
                const EdgeInsets.only(top: 0, left: 20, right: 20, bottom: 20),
            decoration: BoxDecoration(
              color: Colors.white, // 背景白色
              borderRadius: BorderRadius.circular(8.0), // 加圆角
              boxShadow: [
                BoxShadow(
                  color: Colors.black12,
                  offset: Offset(0, 2),
                  blurRadius: 4,
                ),
              ],
            ),
            child: Padding(
                padding: EdgeInsets.all(20),
                child: Column(children: [
                  Row(
                    // mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      TDText(
                        '设备故障趋势',
                        font: TDTheme.of(context).fontBodyMedium,
                        textColor: AppColors.textPrimary,
                      ),
                      TDText(
                        '(次)',
                        font: TDTheme.of(context).fontBodyMedium,
                        textColor: TDTheme.of(context).fontGyColor4,
                        fontWeight: FontWeight.bold,
                      ),
                      const Expanded(child: SizedBox()),
                      Container(
                        width: 8,
                        height: 8,
                        color: TDTheme.of(context).brandColor5,
                      ),
                      const SizedBox(width: 3),
                      TDText(
                        '汇总',
                        font: TDTheme.of(context).fontBodySmall,
                        textColor: TDTheme.of(context).fontGyColor2,
                      ),
                      const SizedBox(width: 10),
                      GestureDetector(
                        onTap: () {
                          // 添加点击事件处理逻辑
                          print('添加分类 clicked');
                          TDPicker.showMultiPicker(context, title: '',
                              onConfirm: (selected) {
                            selected_4 = '${data_1[selected[0]]}';

                            print(selected_4);
                            Navigator.of(context).pop();
                          }, data: [data_1]);
                        },
                        child: Row(
                          children: [
                            Container(
                              width: 8,
                              height: 8,
                              color: Colors.orange,
                            ),
                            const SizedBox(width: 3),
                            TDText(
                              '添加分类',
                              font: TDTheme.of(context).fontBodySmall,
                              textColor: Colors.orange,
                            ),
                            const SizedBox(width: 3),
                            const Icon(
                              TDIcons.chevron_down,
                              color: Colors.orange,
                              size: 20,
                            ),
                          ],
                        ),
                      )
                    ],
                  ),
                  const LineChartSample2(
                      spots: [20, 40, 10, 30, 80, 20],
                      xTitle: ['122', '222', '322', '422', '522', '622'])
                ])),
          ),
        ],
      ),
    );
  }

  Widget buildSelectRow(BuildContext context, String output, String title) {
    return Container(
      color: TDTheme.of(context).whiteColor1,
      height: 56,
      child: Stack(
        alignment: Alignment.bottomCenter,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Padding(
                padding: const EdgeInsets.only(left: 16, top: 16, bottom: 16),
                child: TDText(
                  title,
                  font: TDTheme.of(context).fontBodyLarge,
                ),
              ),
              Expanded(
                  child: Padding(
                padding: const EdgeInsets.only(right: 16, left: 16),
                child: Row(
                  children: [
                    Expanded(
                        child: TDText(
                      output,
                      font: TDTheme.of(context).fontBodyLarge,
                      textColor:
                          TDTheme.of(context).fontGyColor3.withOpacity(0.4),
                      maxLines: 1,
                      overflow: TextOverflow.ellipsis,
                    )),
                    Padding(
                      padding: const EdgeInsets.only(left: 2),
                      child: Icon(
                        TDIcons.chevron_right,
                        color:
                            TDTheme.of(context).fontGyColor3.withOpacity(0.4),
                      ),
                    ),
                  ],
                ),
              )),
            ],
          ),
          const TDDivider(
            margin: EdgeInsets.only(
              left: 16,
            ),
          )
        ],
      ),
    );
  }
}
